import { computed, defineComponent, ref } from 'vue';
import { Button, ButtonGroup, Input, Popover } from 'ant-design-vue';

import editor from '/@/store/modules/bpmnEditor';
import modeler from '/@/store/modules/bpmnModeler';

import ToggleMode from 'bpmn-js-token-simulation/lib/features/toggle-mode/modeler/ToggleMode';
import EventBus from 'diagram-js/lib/core/EventBus';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';

const ExternalTools = defineComponent({
  name: 'ExternalTools',
  setup() {
    const { t } = useI18n();
    const moduleStore = modeler();
    const { createConfirm } = useMessage();

    let minimap: any | null = null;
    const minimapStatus = computed(() => editor().getEditorConfig.miniMap);
    const minimapToggle = () => {
      !minimap && (minimap = moduleStore.getModeler!.get('minimap'));
      minimap && minimap.toggle();
    };

    const mockSimulation = () => {
      moduleStore.getModeler!.get<ToggleMode>('toggleMode').toggleMode();
    };

    let lintModule: any | null = null;
    const lintEnable = computed(() => editor().getEditorConfig.useLint);
    const lintToggle = () => {
      !lintModule && (lintModule = moduleStore.getModeler!.get('linting'));
      lintModule && lintModule.toggle();
    };

    const shortcutKeysEnable = computed(() => editor().getEditorConfig.otherModule);
    const templateExternal = computed(() => editor().getEditorConfig.templateChooser);
    const openShortcutKeysModel = () => {
      const renderDefault = () => (
        <div class="shortcut-keys-model">
          <p>Undo</p>
          <p>Ctrl + Z</p>
          <p>Redo</p>
          <p>Ctrl + Shift + Z / ctrl + Y</p>
          <p>Select All</p>
          <p>Ctrl + A</p>
          <p>Zoom</p>
          <p>Ctrl + Mouse Wheel</p>
          <p>Scrolling (Vertical)</p>
          <p>Mouse Wheel</p>
          <p>Scrolling (Horizontal)</p>
          <p>Shift + Mouse Wheel</p>
          <p>Direct Editing</p>
          <p>E</p>
          <p>Hand Tool</p>
          <p>H</p>
          <p>Lasso Tool</p>
          <p>L</p>
          <p>Space Tool</p>
          <p>S</p>
        </div>
      );
      const renderTemplateExternal = () => (
        <div class="shortcut-keys-model">
          <p>Replace Tool</p>
          <p>R</p>
          <p>Append anything</p>
          <p>A</p>
          <p>Create anything</p>
          <p>N</p>
        </div>
      );
      createConfirm({
        iconType: 'info',
        title: t('routes.bpmn.bpmnShortcutKeys'),
        content: () => (
          <div>
            {renderDefault()}
            {templateExternal.value && renderTemplateExternal()}
          </div>
        ),
      });
    };

    const listeners = ref<string[]>([]);
    const listenerFilter = ref<string>('');
    const visibleListeners = computed(() =>
      listeners.value.filter((i) => i.includes(listenerFilter.value)),
    );
    const openEventsModel = () => {
      const eventBus = moduleStore.getModeler!.get<EventBus>('eventBus');
      listenerFilter.value = '';
      listeners.value = Object.keys(eventBus._listeners).sort();
      createConfirm({
        iconType: 'info',
        title: t('routes.bpmn.bpmnShortcutKeys'),
        content: () => (
          <div class="event-listeners-box">
            <div class="listener-search">
              <Input v-model={[listenerFilter.value, 'value']} clearable={true}></Input>
            </div>
            <div class="event-listeners-box">
              {visibleListeners.value &&
                visibleListeners.value.map((name, key) => {
                  return (
                    <p class="listener-item">
                      {key + 1}：{name}
                    </p>
                  );
                })}
            </div>
          </div>
        ),
      });
    };

    return () => (
      <ButtonGroup>
        <Popover content={t('routes.bpmn.toggleProcessMock')}>
          <Button onClick={() => mockSimulation()}>
            <Icon icon="lucide:bot" />
          </Button>
        </Popover>
        <Popover content={t('routes.bpmn.bpmnEvents')}>
          <Button onClick={() => openEventsModel()}>
            <Icon icon="lucide:podcast" />
          </Button>
        </Popover>

        {minimapStatus.value && (
          <Popover content={t('routes.bpmn.toggleMinimap')}>
            <Button onClick={() => minimapToggle()}>
              <Icon icon="lucide:map" />
            </Button>
          </Popover>
        )}
        {lintEnable.value && (
          <Popover content={t('routes.bpmn.toggleProcessLint')}>
            <Button onClick={() => lintToggle()}>
              <Icon icon="lucide:file-check" />
            </Button>
          </Popover>
        )}
        {shortcutKeysEnable.value && (
          <Popover content={t('routes.bpmn.bpmnShortcutKeys')}>
            <Button onClick={() => openShortcutKeysModel()}>
              <Icon icon="lucide:keyboard" />
            </Button>
          </Popover>
        )}
      </ButtonGroup>
    );
  },
});

export default ExternalTools;
